<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>锐一后台管理系统</title>
    <div th:include="layout/resources :: resources"></div>
</head>
<body>
<div class="container-fluid">
    <div class="col-sm-6 col-lg-offset-3">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="deviceType" class="col-sm-2 control-label">使用设备类型</label>
                <div class="col-sm-10">
                    <select id="deviceType" class="form-control" name="deviceType">
                        <option value="1">虚拟设备</option>
                        <option value="2">真实设备</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="didType" class="col-sm-2 control-label">IP固定到</label>
                <div class="col-sm-10">
                    <select id="didType" class="form-control" name="didType">
                        <option value="0">全国</option>
                        <option value="1">省</option>
                        <option value="2">市</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">选择组<input onchange="initGroup();" id="onlineGroup" type="checkbox"
                                                                checked
                                                                name="onlineGroup"></label>
                <div class="col-sm-10" id="groupNames">

                </div>
            </div>
            <div class="form-group">
                <label for="fun" class="col-sm-2 control-label">项目</label>
                <div class="col-sm-10">
                    <select id="fun" onchange="updateFlow();" class="form-control" name="fun">
                        <option></option>
                    </select>
                </div>
            </div>
            <div id="flows">
            </div>
            <div class="form-group">
                <label for="startTime" class="col-sm-2 control-label">开始时间</label>
                <div class="col-sm-10">
                    <input class="form-control" id="startTime" name="startTime" type="datetime">
                </div>
            </div>
            <div class="form-group">
                <label for="endTime" class="col-sm-2 control-label">结束时间</label>
                <div class="col-sm-10">
                    <input class="form-control" id="endTime" name="startTime" type="datetime">
                </div>
            </div>
            <div class="form-group">
                <label for="cycleNumber" class="col-sm-2 control-label">循环天数</label>
                <div class="col-sm-10">
                    <input class="form-control" value="1" id="cycleNumber" type="number">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" onclick="excute();" class="btn btn-default">执行</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        init();
        showProgress();
    });
    function init() {
        // 初始化组
        initGroup();
        // 初始化项目类型
        $.ajax({
            method: "get",
            url: createUrl('/fun/findAll'),
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    $("#fun").append("<option value='" + result[i].fun + "'>" + result[i].describe + "</option>");
                }
            }
        })
    }

    function initGroup() {
        $("#groupNames").empty();
        $("#groupNames").append('<input type="checkbox" name="groupName" value="0">所有组');
        $.ajax({
            method: "get",
            url: createUrl('/robot/group/findAll/' + $('#onlineGroup').is(':checked')),
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    if (result[i].id) {
                        $("#groupNames").append('<input type="checkbox" name="groupName" value="' + result[i].id + '">' + result[i].id);
                    }
                }
            }
        });
    }
    $('#startTime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        timezone: 'GMT'
    });
    $('#startTime').datetimepicker('update', new Date());
    $('#endTime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        initialDate: new Date()
    });
    $('#endTime').datetimepicker('update', new Date());

    function excute() {
        var request = {};
        request.groupNames = [];
        $('input:checkbox[name=groupName]:checked').each(function (i) {
            request.groupNames.push($(this).val());
        });
        debugger
        request.fun = $("#fun").val();
        request.flows = [];
        request.deviceType = $("#deviceType").val();
        request.startTime = $("#startTime").val();
        request.endTime = $("#endTime").val();
        request.cycleNumber = $("#cycleNumber").val();
        request.didType = $("#didType").val();
        for (var i = 0; i < $(".flow").length; i++) {
            var flow = {};
            var $flow = $($(".flow")[i]);
            flow.id = $flow.find("[name='flowId']").val();
            flow.time = $flow.find("[name='time']").val();
            flow.startDate = $flow.find("[name='startDate']").val();
            flow.endDate = $flow.find("[name='endDate']").val();
            request.flows.push(flow);
        }
        $.ajax({
            url: createUrl('/robot/conf'),
            type: "post",
            data: JSON.stringify(request),
            contentType: "application/json",
            success: function (result) {
                if (result.success) {
                    framework.alert("执行完成");
                } else {
                    framework.alert("执行失败:" + result.error);
                }
            }
        })
    }

    function updateFlow() {
        $.ajax({
            url: createUrl("/fun/getOne?fun=" + $("#fun").val()),
            method: "get",
            success: function (data) {
                $("#flows").empty();
                for (i in data.flows) {
                    var $flow = $('<div class="flow"></div>');
                    $flow.append('<div class="form-group"><label class="col-sm-2 control-label">' + data.flows[i].describe + '次数</label><div class="col-sm-10"><input name="flowId" value="' + data.flows[i].id + '" type="hidden"><input class="form-control" name="time" type="text"></div></div>');
                    $("#flows").append($flow);
                    var steps = data.flows[i].action.steps;
                    if (steps) {
                        for (j in steps) {
                            if (steps[j].stepType == 3) {
                                var dataDom = '<div class="form-group"><label class="col-sm-2 control-label">开始日期</label> <div class="col-sm-10"><input class="form-control date" name="startDate" type="text"></div></div><div class="form-group"> <label class="col-sm-2 control-label">结束日期</label> <div class="col-sm-10"><input class="form-control date" name="endDate" type="datetime"> </div></div>';
                                $flow.append(dataDom);
                            }
                        }
                    }
                    $("#flows").append($flow);
                }
                $('.date').datetimepicker({
                    format: 'yyyy-mm-dd',
                    minView: 2,
                    maxView: 3,
                    viewSelect: 2

                });
            }
        })
    }

    function showProgress() {
        $.ajax({
            url: createUrl("/taskDetail/getLastTaskByFun?fun=" + $("#fun").val()),
            method: "get",
            success: function (result) {
                if (result.success) {
                    // $("#progress").width(result.returnInfo.finishTime / result.returnInfo.totalTime * 100 + "%");
                }
            }
        })
    }
</script>
</html>
